<template>
    <div style=" pointer-events:none; width: 100%;height: 100%;display: flex;flex-direction: column;background: #fff;">
        <p style="display: flex;width: 100%;flex: 1;"><span style="width: 60px;background: #e6ebf5"> 姓名</span> <span
                style="flex:1;font-weight: bold;" class="multi-line">{{ NodesDatae.receiverName }}</span></p>
        <p style="display: flex;width: 100%;flex: 1;"><span style="width: 60px;background: #e6ebf5"> 部门</span> <span
                style="flex:1;font-weight: bold;" class="multi-line">{{ NodesDatae.deptName }}</span></p>
        <p style="display: flex;width: 100%;flex: 1;"><span style="width: 60px;background: #e6ebf5"> 角色</span> <span
                style="flex:1;font-weight: bold;" class="multi-line">{{ NodesDatae.roleName }}</span></p>

    </div>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';
let NodesDatae = ref({
    receiverName: undefined,
    deptName: undefined,
    roleeName: undefined
})
onMounted(() => {
    NodesDatae.value = inject('getNode')().data
    
})
</script>
<style scoped>
p {
    margin: 0;

}

.multi-line {
   
     /* 必须设置固定宽度或最大宽度 */
  overflow: hidden;      /* 隐藏溢出内容 */
  white-space: nowrap;   /* 强制文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */


}
</style>